<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>{{config.app.name}}</title>
		
		<link rel="stylesheet" href="/www/css/bootstrap.min.css">
		<link rel="stylesheet" href="/www/css/bootstrap.editor.min.css">
		<link rel="stylesheet" href="/www/css/bootstrap-year-calendar.min.css">
		<link rel="stylesheet" href="/www/css/bootstrap-datepicker.min.css">
		<link rel="stylesheet" href="/www/css/jquery.gantt.min.css">
		<link rel="stylesheet" href="/www/css/jstree.min.css">
		<link rel="stylesheet" href="/www/css/fontawesome.min.css">
		<link rel="stylesheet" href="/www/css/site.css">

		<script src="/www/js/jquery.min.js"></script>
		<script src="/www/js/js.cookie.min.js"></script>
		<script src="/www/js/jquery.gantt.min.js"></script>
		<script src="/www/js/jstree.min.js"></script>
		<script src="/www/js/bootstrap.min.js"></script>
		<script src="/www/js/bootstrap-datepicker.min.js"></script>
		<script src="/www/js/bootstrap.editor.min.js"></script>
		<script src="/www/js/bootstrap-year-calendar.js"></script>
	</head>
	<body>
		<nav class="navbar navbar-expand-sm sticky-top navbar-dark bg-dark p-0">
			<a class="navbar-brand" href="#" style="font-size: 1em; color: #10af88;">
				<img src="/www/favicon.ico" width="24px" height="24px" style="margin: -6px 8px 0 8px;">
				{{config.app.name}}
			</a>

			{% if session.uid then %}
			<ul class="navbar-nav ml-auto">
				<li class="nav-item">
					<a class="nav-link" href="#" onclick="return navbar_popup('/user/notification/', 400);">
						<i class="fa fa-bell fa-fw"></i><sup><span class="navbar-notifications">0</span></sup>
					</a>
				</li>

				<li class="nav-item">
					<a class="nav-link" href="#" onclick="return navbar_popup('/user/profile/', 250);">
						<img id="navbar-avatar" src="{{session.avatar}}" width="20px" height="20px" class="rounded-circle" style="margin-top: -2px"> <span id="navbar-name">{{session.name}}</span>
					</a>
				</li>
			</ul>

			<!-- 实时获取用户通知信息 -->
			<script>
				function get_notification_count() {
					$.post('/user/notification/count', function(ret) {
						if (ret.count > 0) {
							$('.navbar-notifications').text(ret.count);
							$('.navbar-notifications').show();
						} else {
							$('.navbar-notifications').hide();
						}
					}, 'json');
				}

				setInterval(get_notification_count, 30000);
				get_notification_count();
			</script>
			{% end %}
		</nav>

		<div class="navbar-popup shadow invisible">
		</div>

		{*view*}
	</body>

	<script>
	function show_error(container, title, message) {
		var elem = $(container).get(0);
		elem.innerHTML = '<div class="alert alert-danger alert-dismissible fade show" role="alert">'
			+ '<strong>' + title + '</strong>：&nbsp;'
			+ message
			+ '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'
			+ '</div>';
	}

	var navbar_popup_url = null;
	function navbar_popup(url, width, is_refresh) {
		if (!is_refresh && url == navbar_popup_url && $('.navbar-popup').hasClass('visible')) {
			navbar_popup_close();
			return;
		}

		navbar_popup_url = url;
		$.post(url, function(ret) {
			$('.navbar-popup').empty();
			$('.navbar-popup').append($(ret));
			$('.navbar-popup').width(width);
			$('.navbar-popup').removeClass('invisible');
			$('.navbar-popup').addClass('visible');
		}, 'html');
	}

	function navbar_popup_close() {
		$('.navbar-popup').empty();
		$('.navbar-popup').removeClass('visible');
		$('.navbar-popup').addClass('invisible');
	}
	</script>
</html>